<template>
	<view class="accountLayout">
		<headerSpaceBetweenVue>
			<template #icon>
				<text @click="saveInfo()">保存</text>
			</template>
			<template #title>个人信息</template>
		</headerSpaceBetweenVue>
		<view class="container">
			<view class="avatar-container">
				<image class="avatar" :src="updateField.avator" @click="changeAvator()"></image>
				<text class="avatar-tip">点击更换头像</text>
			</view>
			<view class="info-list">
				<view class="info-item" @click="editInfo('nickname',updateField.nickname)">
					<text class="item-label">用户名</text>
					<view class="item-content">
						<text class="item-value">{{updateField.nickname}}</text>
						<view class="arrow-right"></view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="info-item" @click="editInfo('signature',updateField.signature)">
					<text class="item-label">个性签名</text>
					<view class="item-content">
						<text class="item-value gray-text">{{updateField.signature}}</text>
						<view class="arrow-right"></view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="info-item">
					<text class="item-label">QQ账号</text>
					<view class="item-content">
						<text class="item-value">{{updateField.qq}}</text>
						<!-- <view class="arrow-right"></view> -->
					</view>
				</view>
			</view>
			<view class="footer-tip">
				<text class="tip-text">修改个人信息后将同步更新到关联账号</text>
			</view>
		</view>
		<view class="changeInfoModel" v-if="showModel">
			<view class="form-box">
				<view class="closeModel">
					<uni-icons type="closeempty" size="30" @click="closeModel"></uni-icons>
				</view>
				<input type="text" v-model="actValue" />
				<button @click="saveField">确定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		apiChangeAccount,
		apiGetAccount,
		apiUploadAvator
	} from '@/api/apis';
	import {
		ref
	} from 'vue';
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	onLoad(() => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
	})
	let user = ref([])
	let updateField = ref({
		'avator': '',
		'nickname': '',
		'qq': '',
		'signature': ''
	})
	let showModel = ref(false)
	let actField = ref('')
	let actValue = ref('')
	const loadInfo = async () => {
		await apiGetAccount().then(res => {
			updateField.value.avator = res.data.avator
			updateField.value.nickname = res.data.nickname
			updateField.value.qq = res.data.qq
			updateField.value.signature = res.data.signature
			uni.hideLoading()
		})
	}
	const editInfo = (field, fieldVal) => {
		showModel.value = !showModel.value
		actField.value = field
		actValue.value = fieldVal
	}
	const closeModel = () => {
		showModel.value = false
	}
	const saveField = () => {
		updateField.value[actField.value] = actValue.value
		updateField.value[actField.value] = actValue.value
		closeModel()
	}
	const saveInfo = async () => {
		await apiChangeAccount(updateField.value).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		})

	}
	const changeAvator = async () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {
				await apiUploadAvator({
					url: res.tempFilePaths[0]
				}).then(res => {
					const data = JSON.parse(res)
					if (data.code != 200) {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
					} else {
						updateField.value['avator'] = data.data
						uni.showToast({
							title: "上传成功,请耐心等待审核",
							icon: 'none'
						})
					}
				})
			}
		})
	}
	loadInfo()
</script>

<style lang="scss" scoped>
	.accountLayout {
		position: relative;
		padding: 20rpx;
		padding-top: calc(var(--status-bar-height) + 100rpx);

		.changeInfoModel {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			min-height: calc(100vh - var(--status-bar-height) - 100rpx);

			.closeModel {
				display: flex;
				justify-content: flex-end;
			}

			.form-box {
				width: 80%;
				background-color: #fff;
				box-shadow: 2rpx 8rpx rgba(0, 0, 0, 0.08);
				border-radius: 10rpx;
				padding: 20rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;

				input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1rpx solid $theme-color;
					margin: 20rpx 0;
					padding-left: 20rpx;
				}

				button {
					margin-top: 20rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					background-color: $theme-color;
					color: #fff;
				}
			}
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ffffff;
			padding: 32rpx;
		}

		.avatar-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 40rpx 0 60rpx;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				border: 1rpx solid #eeeeee;
			}

			.avatar-tip {
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
			}
		}

		.info-list {
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.item-label {
				font-size: 32rpx;
				color: #333333;
				font-weight: normal;
			}

			.item-content {
				display: flex;
				align-items: center;

				.item-value {
					font-size: 32rpx;
					color: #333333;
					margin-right: 12rpx;

					&.gray-text {
						color: #999999;
					}
				}

				.arrow-right {
					width: 16rpx;
					height: 16rpx;
					border-top: 2rpx solid #cccccc;
					border-right: 2rpx solid #cccccc;
					transform: rotate(45deg);
				}
			}
		}

		.divider {
			height: 1rpx;
			background-color: #eeeeee;
			margin: 0 20rpx;
		}

		.footer-tip {
			width: 100%;
			margin-top: 60rpx;
			text-align: center;

			.tip-text {
				font-size: 24rpx;
				color: #999999;
				line-height: 1.6;
			}
		}
	}
</style>